// main.qml
// QPushButton 适配到 Qt for HarmonyOS
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15

ApplicationWindow {
    id: root
    width: Screen.width > 0 ? Screen.width : 1260
    height: Screen.height > 0 ? Screen.height : 2720
    visible: true
    title: "QPushButton 样式表示例"
    // flags属性在HarmonyOS上可能不支持，已移除
    
    // 背景色
    color: "#F5F5F5"
    
    // 点击反馈提示（放在ApplicationWindow层级，确保显示在所有内容之上）
    Rectangle {
        id: feedbackRect
        width: root.width - 60
        height: 70
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 50
        color: "#E3F2FD"
        border.color: "#2196F3"
        border.width: 3
        radius: 10
        visible: false
        z: 1000
        
        Text {
            anchors.centerIn: parent
            text: "按钮已点击！"
            font.pixelSize: 28
            font.bold: true
            color: "#1976D2"
        }
        
        SequentialAnimation on opacity {
            id: feedbackAnimation
            running: false
            NumberAnimation { from: 0; to: 1; duration: 200 }
            PauseAnimation { duration: 1500 }
            NumberAnimation { from: 1; to: 0; duration: 200 }
            onFinished: feedbackRect.visible = false
        }
    }
    
    // 显示反馈的函数
    function showFeedback(buttonText) {
        feedbackRect.visible = true
        feedbackRect.opacity = 0
        feedbackAnimation.start()
        console.log("按钮被点击:", buttonText)
    }
    
    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: width
        contentHeight: mainColumn.height + 100  // 增加底部边距
        clip: true
        
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
        }
        
        Column {
            id: mainColumn
            width: flickable.width
            spacing: 30
            topPadding: 30
            leftPadding: 30
            rightPadding: 30
            bottomPadding: 100  // 增加底部padding，确保最后的内容可见
            
            // 标题
            Text {
                id: titleLabel
                text: "QPushButton 样式表示例"
                width: parent.width
                horizontalAlignment: Text.AlignHCenter
                font.pixelSize: 52
                font.bold: true
                color: "#333333"
                padding: 20
            }
            
            // 1. 基础样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 60
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 20
                        anchors.verticalCenter: parent.verticalCenter
                        text: "基础样式"
                        font.pixelSize: 30
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    Button {
                        id: basicButton
                        text: "基础样式"
                        width: Math.min(150, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#4CAF50"
                            radius: 0
                        }
                        contentItem: Text {
                            text: basicButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(basicButton.text)
                        }
                    }
                    
                    Button {
                        id: redButton
                        text: "红色按钮"
                        width: Math.min(150, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#F44336"
                            radius: 0
                        }
                        contentItem: Text {
                            text: redButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(redButton.text)
                        }
                    }
                    
                    Button {
                        id: blueButton
                        text: "蓝色按钮"
                        width: Math.min(150, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#2196F3"
                            radius: 0
                        }
                        contentItem: Text {
                            text: blueButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(blueButton.text)
                        }
                    }
                }
            }
            
            // 2. 按钮状态样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "按钮状态样式"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    Button {
                        id: stateButton
                        text: "悬停和按下效果"
                        width: Math.min(200, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            color: stateButton.pressed ? "#3D8B40" : (stateButton.hovered ? "#5CBF60" : "#4CAF50")
                            radius: 0
                        }
                        contentItem: Text {
                            text: stateButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.bold: stateButton.hovered
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(stateButton.text)
                        }
                    }
                    
                    Button {
                        id: borderStateButton
                        text: "边框状态变化"
                        width: Math.min(200, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            color: "#2196F3"
                            border.color: borderStateButton.pressed ? "#0D47A1" : (borderStateButton.hovered ? "#BBDEFB" : "#1976D2")
                            border.width: borderStateButton.hovered ? 3 : 2
                            radius: 0
                        }
                        contentItem: Text {
                            text: borderStateButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(borderStateButton.text)
                        }
                    }
                }
            }
            
            // 3. 渐变背景样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "渐变背景样式"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    Button {
                        id: linearGradientButton
                        text: "线性渐变"
                        width: Math.min(180, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            gradient: Gradient {
                                GradientStop { position: 0.0; color: "#4CAF50" }
                                GradientStop { position: 1.0; color: "#8BC34A" }
                            }
                            radius: 0
                        }
                        contentItem: Text {
                            text: linearGradientButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(linearGradientButton.text)
                        }
                    }
                    
                    Button {
                        id: radialGradientButton
                        text: "径向渐变"
                        width: Math.min(180, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            // QML Rectangle不支持RadialGradient，使用线性渐变代替
                            gradient: Gradient {
                                orientation: Gradient.Vertical
                                GradientStop { position: 0.0; color: "#FF5722" }
                                GradientStop { position: 1.0; color: "#E64A19" }
                            }
                            radius: 0
                        }
                        contentItem: Text {
                            text: radialGradientButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(radialGradientButton.text)
                        }
                    }
                }
            }
            
            // 4. 边框样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "边框样式"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    
                    Button {
                        id: roundedButton
                        text: "圆角按钮"
                        width: Math.min(140, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#9C27B0"
                            border.color: "#7B1FA2"
                            border.width: 2
                            radius: 15
                        }
                        contentItem: Text {
                            text: roundedButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(roundedButton.text)
                        }
                    }
                    
                    Button {
                        id: dashedButton
                        text: "虚线边框"
                        width: Math.min(140, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#FF9800"
                            border.color: "#E65100"
                            border.width: 2
                            radius: 5
                            // QML中虚线边框需要使用Canvas绘制，这里用实线边框代替
                        }
                        contentItem: Text {
                            text: dashedButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(dashedButton.text)
                        }
                    }
                    
                    Button {
                        id: doubleBorderButton
                        text: "双边框"
                        width: Math.min(140, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#00BCD4"
                            border.color: "#006064"
                            border.width: 2
                            radius: 5
                        }
                        contentItem: Text {
                            text: doubleBorderButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(doubleBorderButton.text)
                        }
                    }
                }
            }
            
            // 5. 图标按钮样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "图标按钮样式"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    Button {
                        id: iconButton
                        text: "🔍 搜索"
                        width: Math.min(160, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            color: "#607D8B"
                            radius: 5
                        }
                        contentItem: Text {
                            text: iconButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        leftPadding: 40
                        onClicked: {
                            showFeedback(iconButton.text)
                        }
                    }
                    
                    Button {
                        id: detailsButton
                        text: "详情 ⋯"
                        width: Math.min(160, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            color: "#3F51B5"
                            radius: 5
                        }
                        contentItem: Text {
                            text: detailsButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignLeft
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(detailsButton.text)
                        }
                    }
                }
            }
            
            // 6. 自定义形状示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "自定义形状"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    Button {
                        id: circleButton
                        text: "+"
                        width: 90
                        height: 90
                        background: Rectangle {
                            color: circleButton.pressed ? "#B71C1C" : (circleButton.hovered ? "#D32F2F" : "#F44336")
                            radius: 45
                        }
                        contentItem: Text {
                            text: circleButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 36
                            font.bold: true
                        }
                        onClicked: {
                            showFeedback("圆形按钮")
                        }
                    }
                    
                    Button {
                        id: capsuleButton
                        text: "胶囊形状"
                        width: Math.min(180, (parent.width - parent.spacing - 90))
                        height: 70
                        background: Rectangle {
                            color: "#009688"
                            radius: capsuleButton.height / 2
                        }
                        contentItem: Text {
                            text: capsuleButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        leftPadding: 35
                        rightPadding: 35
                        onClicked: {
                            showFeedback(capsuleButton.text)
                        }
                    }
                }
            }
            
            // 7. 禁用状态样式示例
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "禁用状态样式"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 25
                    
                    Button {
                        id: enabledButton
                        text: "启用按钮"
                        width: Math.min(160, (parent.width - parent.spacing) / 2)
                        height: 70
                        background: Rectangle {
                            color: "#2196F3"
                            radius: 0
                        }
                        contentItem: Text {
                            text: enabledButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(enabledButton.text)
                        }
                    }
                    
                    Button {
                        id: disabledButton
                        text: "禁用按钮"
                        width: Math.min(160, (parent.width - parent.spacing) / 2)
                        height: 70
                        enabled: false
                        background: Rectangle {
                            color: "#BDBDBD"
                            radius: 0
                            opacity: 0.6
                        }
                        contentItem: Text {
                            text: disabledButton.text
                            color: "#757575"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                    }
                }
            }
            
            // 8. 阴影效果按钮
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "阴影效果按钮"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    
                    Button {
                        id: shadowButton1
                        text: "轻微阴影"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#FF6B6B"
                            radius: 8
                            border.width: 0
                        }
                        contentItem: Text {
                            text: shadowButton1.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(shadowButton1.text)
                        }
                        // 使用DropShadow效果（需要QtGraphicalEffects模块，这里用简单方式模拟）
                    }
                    
                    Button {
                        id: shadowButton2
                        text: "中等阴影"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#4ECDC4"
                            radius: 8
                            border.width: 0
                        }
                        contentItem: Text {
                            text: shadowButton2.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(shadowButton2.text)
                        }
                    }
                    
                    Button {
                        id: shadowButton3
                        text: "强烈阴影"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#95E1D3"
                            radius: 8
                            border.width: 0
                        }
                        contentItem: Text {
                            text: shadowButton3.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(shadowButton3.text)
                        }
                    }
                }
            }
            
            // 9. 扁平化按钮
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "扁平化按钮"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    
                    Button {
                        id: flatButton1
                        text: "扁平按钮"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: flatButton1.pressed ? "#E3F2FD" : (flatButton1.hovered ? "#F5F5F5" : "#FFFFFF")
                            radius: 4
                            border.color: "#E0E0E0"
                            border.width: 1
                        }
                        contentItem: Text {
                            text: flatButton1.text
                            color: "#2196F3"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(flatButton1.text)
                        }
                    }
                    
                    Button {
                        id: flatButton2
                        text: "扁平绿色"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: flatButton2.pressed ? "#C8E6C9" : (flatButton2.hovered ? "#E8F5E9" : "#FFFFFF")
                            radius: 4
                            border.color: "#C8E6C9"
                            border.width: 1
                        }
                        contentItem: Text {
                            text: flatButton2.text
                            color: "#4CAF50"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(flatButton2.text)
                        }
                    }
                    
                    Button {
                        id: flatButton3
                        text: "扁平红色"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: flatButton3.pressed ? "#FFCDD2" : (flatButton3.hovered ? "#FFEBEE" : "#FFFFFF")
                            radius: 4
                            border.color: "#FFCDD2"
                            border.width: 1
                        }
                        contentItem: Text {
                            text: flatButton3.text
                            color: "#F44336"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(flatButton3.text)
                        }
                    }
                }
            }
            
            // 10. 不同尺寸按钮
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "不同尺寸按钮"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    anchors.horizontalCenter: parent.horizontalCenter
                    
                    Button {
                        id: smallButton
                        text: "小按钮"
                        width: Math.min(120, (parent.width - parent.spacing * 2) / 3)
                        height: 50
                        background: Rectangle {
                            color: "#9E9E9E"
                            radius: 4
                        }
                        contentItem: Text {
                            text: smallButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 18
                        }
                        padding: 12
                        onClicked: {
                            showFeedback(smallButton.text)
                        }
                    }
                    
                    Button {
                        id: mediumButton
                        text: "中等按钮"
                        width: Math.min(160, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "#9E9E9E"
                            radius: 4
                        }
                        contentItem: Text {
                            text: mediumButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(mediumButton.text)
                        }
                    }
                    
                    Button {
                        id: largeButton
                        text: "大按钮"
                        width: Math.min(200, (parent.width - parent.spacing * 2) / 3)
                        height: 90
                        background: Rectangle {
                            color: "#9E9E9E"
                            radius: 4
                        }
                        contentItem: Text {
                            text: largeButton.text
                            color: "white"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 28
                        }
                        padding: 25
                        onClicked: {
                            showFeedback(largeButton.text)
                        }
                    }
                }
            }
            
            // 11. 文字按钮（无背景）
            Column {
                width: parent.width
                spacing: 10
                
                Rectangle {
                    width: parent.width
                    height: 50
                    color: "#F0F0F0"
                    Text {
                        anchors.left: parent.left
                        anchors.leftMargin: 15
                        anchors.verticalCenter: parent.verticalCenter
                        text: "文字按钮（无背景）"
                        font.pixelSize: 24
                        font.bold: true
                    }
                }
                
                Row {
                    width: parent.width
                    spacing: 20
                    
                    Button {
                        id: textButton1
                        text: "文字按钮"
                        width: Math.min(150, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: textButton1.pressed ? "#E3F2FD" : "transparent"
                            radius: 4
                            border.width: 0
                        }
                        contentItem: Text {
                            text: textButton1.text
                            color: "#2196F3"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.underline: textButton1.hovered
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(textButton1.text)
                        }
                    }
                    
                    Button {
                        id: textButton2
                        text: "链接样式"
                        width: Math.min(150, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "transparent"
                            radius: 0
                            border.width: 0
                        }
                        contentItem: Text {
                            text: textButton2.text
                            color: "#1976D2"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.underline: true
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(textButton2.text)
                        }
                    }
                    
                    Button {
                        id: textButton3
                        text: "强调文字"
                        width: Math.min(150, (parent.width - parent.spacing * 2) / 3)
                        height: 70
                        background: Rectangle {
                            color: "transparent"
                            radius: 0
                            border.width: 0
                        }
                        contentItem: Text {
                            text: textButton3.text
                            color: textButton3.pressed ? "#1565C0" : "#2196F3"
                            horizontalAlignment: Text.AlignHCenter
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 24
                            font.bold: true
                        }
                        padding: 20
                        onClicked: {
                            showFeedback(textButton3.text)
                        }
                    }
                }
            }
        }
    }
}
